<template>
  <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: ''  }" class="a">房源分配</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="card-container">
          <el-card class="card1">
              <div class="card-container">
              <el-card class="card1_1">
                  <div class="card-container">
                  <img src="../../../../assets/images/card1_logo1.png" alt="" class="card1_logo1">
                  <span class="card1_title" >本科生人数</span>
                  <img src="../../../../assets/images/card1_logo2.png" alt="" class="card1_logo2">
                      <span class="card1_number1">{{bksNumber}}</span>
                      <span class="card1_text1">学生状态为在籍在校</span>
                  </div>
                  <el-divider class="card1_divider1"></el-divider>
                  <div class="card-container">
                  <span class="card1_text2">入住人数</span>
                      <div class="text-container1">
                  <span class="card1_number2">{{bksBedNumber}}</span>
                  <span class="card1_text3">人</span>
                      </div>
                  <el-divider direction="vertical" class="card1_divider2"></el-divider>
                  <span class="card1_text4">未入住人数</span>
                      <div class="text-container2">
                  <span class="card1_number3">{{bksNoBedNumber}}</span>
                  <span class="card1_text5">人</span>
                      </div>
                  </div>
              </el-card>
                  <el-card class="card1_2">
                      <div class="card-container">
                          <img src="../../../../assets/images/card2_logo1.png" alt="" class="card1_logo1">
                          <span class="card1_title" >研究生人数</span>
                          <img src="../../../../assets/images/card2_logo2.png" alt="" class="card1_logo2">
                          <span class="card1_number1">{{yjsNumber}}</span>
                          <span class="card1_text1">学生状态为在籍在校</span>
                      </div>
                      <el-divider class="card1_divider1"></el-divider>
                      <div class="card-container">
                          <span class="card1_text2">入住人数</span>
                          <div class="text-container1">
                          <span class="card1_number2">{{yjsBedNumber}}</span>
                          <span class="card1_text3">人</span>
                          </div>
                          <el-divider direction="vertical" class="card1_divider2"></el-divider>
                          <span class="card1_text4">未入住人数</span>
                          <div class="text-container2">
                          <span class="card1_number3">{{yjsNoBedNumber}}</span>
                          <span class="card1_text5">人</span>
                          </div>
                      </div>
                  </el-card>
              </div>
          </el-card>
          <el-card class="card2">
              <div class="card-container">
                  <img src="../../../../assets/images/statisticLogo.png" alt="" class="card2_logo">
                  <span class="card2_title">分配说明</span>
                  <span class="card2_text">由于学校信息化建设不断推进，原“住宿管理”系统已经不能够完全满足多学生类型的住宿管理信息化支持。先将升级房源基建相关的功能独立，完善基建功能以便后期整合所有住宿资源、优化分配、合理分配，决策分析、2D建模、3D建模、AR等广度使用场景，并促使学校住宿信息化步入数字化。</span>
                  <span class="card2_text">房源分配数据来源于现行住宿管理中空闲床位进行学生类型划分（本科生、研究生...），通过各学生类型住宿管理中可释放床位占用。</span>
              </div>
          </el-card>
      </div>
      <div class="card-container">
          <el-card class="card3">
              <div class="card-container">
                  <el-card class="card3_1">
                      <div class="card-container">
                      <img src="../../../../assets/images/card3_logo1.png" alt="" class="card3_logo1">
                      <span class="card3_title">本科生空闲床位</span>
                          <div class="text-container3">
                      <span class="card3_number1">{{spareBedNumber}}</span>
                      <span class="card3_text1">个</span>
                          </div>
                      <span class="card3_text2">本科生正在使用床位</span>
                          <div class="text-container3">
                      <span class="card3_number2">{{bksBedNumber}}</span>
                      <span class="card3_text3">个</span>
                          </div>
                      </div>
                  </el-card>
                  <el-card class="card3_2">
                      <div class="card-container">
                     <img src="../../../../assets/images/card3_logo2.png" alt="" class="card3_logo2">
                          <span class="card3_title">研究生空闲床位</span>
                          <div class="text-container3">
                          <span class="card3_number1">{{spareBedNumber}}</span>
                          <span class="card3_text1">个</span>
                          </div>
                          <span class="card3_text2">研究生正在使用床位</span>
                          <div class="text-container3">
                          <span class="card3_number2">{{yjsBedNumber}}</span>
                          <span class="card3_text3">个</span>
                          </div>
                      </div>
                  </el-card>
              </div>
          </el-card>
          <el-card class="card4">
              <div class="card-container">
                  <img src="../../../../assets/images/statisticLogo.png" alt="" class="card2_logo">
                  <span class="card2_title">当前可调配床位</span>
                  <span class="card4_number">{{spareBedNumber}}</span>
                  <span class="card4_text1">个</span>
                  <img src="../../../../assets/images/card4_pic.png" alt="" class="card4_pic">
                  <span class="card4_text2">当前数据发生变动说明，存在学生入住申请成功、住宿管理员统一分配</span>
                  <el-button class="button" @click="$router.push('/beginAllocation')">开始分配</el-button>
              </div>
          </el-card>
      </div>
  </div>
</template>

<script>
import {degreeStudentData, bksBedData, yjsBedData, spareBed} from '../../../../api/user'

export default {
  name: 'Second',
  data () {
    return {
      bksNumber: 0,
      bksBedNumber: 0,
      bksNoBedNumber: 0,
      yjsNumber: 0,
      yjsBedNumber: 0,
      yjsNoBedNumber: 0,
      spareBedNumber: 0
    }
  },
  methods: {
    getPageData () {
      degreeStudentData().then(res => {
        let data1 = res.data.map(x => x.number)
        this.bksNumber = data1[0]
        this.yjsNumber = data1[1] + data1[2]
      })
      bksBedData().then(res => {
        let data2 = res.data.map(x => x.number)
        this.bksBedNumber = data2[0]
        this.bksNoBedNumber = data2[1]
      })
      yjsBedData().then(res => {
        let data3 = res.data.map(x => x.number)
        this.yjsBedNumber = data3[0]
        this.yjsNoBedNumber = data3[1]
      })
      spareBed().then(res => {
        let data4 = res.data.map(x => x.number)
        this.spareBedNumber = data4[0]
      })
    }
  },
  created () {
    this.getPageData()
  }
}
</script>

<style scoped>
.a{
    color: #808080;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 23px;
    margin-left: 16px;
    display: inline-block;
}
.card1{
    width: 63%;
    height: 464px;
    margin-left: 16px;
    margin-top: 22px;
}
.card2{
    width: 24%;
    height: 464px;
    margin-left: 16px;
    margin-top: 22px;
}
.card3{
    width: 49%;
    height: 450px;
    margin-left: 16px;
    margin-top: 22px;
}
.card4{
    width: 38%;
    height: 450px;
    margin-left: 16px;
    margin-top: 22px;
}
.card-container{
    display: flex;
    flex-wrap:wrap;
}
.text-container1{
    display: flex;
    flex-wrap:wrap;
}
.text-container2{
    display: flex;
    flex-wrap:wrap;
    position: fixed;
    margin-left: 306px;
}
.text-container3{
    display: flex;
    flex-wrap:wrap;
    margin: auto;
    width: 50%;
}
.card1_1{
    width: 492px;
    height:387px;
    margin-left: 41px;
    margin-top: 14px;
    display: flex;
    border-color: #D1DBF5;
}
.card1_2{
    width: 492px;
    height:387px;
    margin-left: 16px;
    margin-top: 14px;
    display: flex;
    border-color: #D1DBF5;
}
.card1_logo1{
    height: 36px;
    width: 36px;
    margin-left: 4px;
    margin-top: 0px;
}
.card1_logo2{
    height:213px;
    width:196px;
    margin-left:276px;
    margin-top: -60px;
}
.card1_title{
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-left: 10px;
}
.card1_number1{
    color: #1a1a1a;
    font-size: 50px;
    font-weight: 700;
    margin-left: -5px;
    margin-top: -110px;
}
.card1_number2{
    color: #1a1a1a;
    font-size: 36px;
    font-weight: 700;
    margin-top: 45px;
    margin-left: -60px;
}
.card1_number3{
    color: #1a1a1a;
    font-size: 36px;
    font-weight: 700;
    margin-top: 45px;
    margin-left: -60px;
}
.card1_text1{
    color: #808080;
    font-size: 14px;
    font-weight: 400;
    margin-left: 3px;
    margin-top: 144px;
    position: fixed;
}
.card1_text2{
    color: #808080;
    font-size: 14px;
    font-weight: 400;
    margin-top: 20px;
}
.card1_text3{
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    margin-top: 75px;
}
.card1_text4{
    color: #808080;
    font-size: 14px;
    font-weight: 400;
    margin-top: 20px;
    margin-left: 250px;
    position: fixed;
}
.card1_text5{
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    margin-top: 75px;
}
.card1_divider1{
    width: 97%;
    border-color: #D1DBF5;
}
.card1_divider2{
    width:1px;
    margin-left: 220px;
    height:100px;
    border-color: #D1DBF5;
    position: fixed;
}
.card2_logo{
    width:20px;
    height:29px;
}
.card2_title{
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
}
.card2_text{
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 400;
    margin-top: 34px;
    margin-left: 8px;
}
.card3_logo1{
    width:36px;
    height:36px;
}
.card3_logo2{
    width:36px;
    height:36px;
}
.card3_1{
    width: 385px;
    height: 412px;
    margin-left: 34px;
    background-image: url("../../../../assets/images/card3_pic1.png");
}
.card3_2{
    width: 385px;
    height: 412px;
    margin-left: 13px;
    background-image: url("../../../../assets/images/card3_pic2.png");
}
.card3_title{
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-left: 10px;
}
.card3_number1{
    color: #FFFFFF;
    font-size: 89px;
    font-weight: 700;
    margin-top: 70px;
    margin-left:-50px;
}
.card3_number2{
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 700;
    margin-top: 100px;
    margin-left: 40px;
}
.card3_text1{
    color: #FFFFFF;
    font-size: 19px;
    font-weight: 700;
    margin-top: 140px;
}
.card3_text2{
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    margin-top: 250px;
    margin-left: 110px;
    position: fixed;
}
.card3_text3{
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    margin-top: 130px;
}
.card4_number{
    color: #275CE6;
    font-size: 89px;
    font-weight: 700;
    margin-top: 80px;
    margin-left: -130px;
}
.card4_text1{
    color: #000000;
    font-size: 19px;
    font-weight: 700;
    margin-top: 150px;
}
.card4_text2{
    color: #808080;
    font-size: 14px;
    font-weight: 400;
    margin-top: -10px;
}
.card4_pic{
    width: 210px;
    height: 210px;
    margin-left: 420px;
    margin-top: -180px;
}
.button{
    margin-top: 30px;
    width:627px;
    height: 133px;
    font-size: 28px;
    font-weight: 400;
    color: #275CE6;
    border-color: #275CE6;
    background-repeat: no-repeat;
    background-position: 64% 50%;
    background-image: url("../../../../assets/images/card4_button.png") ;
    background-size: 25.44px;
}
</style>
